import React, { Component } from "react";
import Child from "./Child";

// 生命周期只能给类组件用，函数组件没有生命周期
class App extends Component {
  // constructor函数是当这个类被实例化的时候就会自动执行
  // 最先执行，值会被执行一次
  // 初始化属性和状态
  // 可以接收一个参数props，用于将props的值给state作为初始值
  constructor(props) {
    super(props);
    this.state = {
      count: props.count,
    };
    // this.fn = this.fn.bind(this);
    // this.ipt = createRef()
  }

  // 挂载阶段
  // componentWillMount在新版本中被改名,被废弃了
  UNSAFE_componentWillMount() {
    console.log("app componentWillMount");
    // this.setState({
    //   count: 30,
    // });
    // 不要做数据请求
    // fiber算法, 将大任务分成了很多个小任务，所以有可能会让数据请求执行多次
  }

  // render也是一个生命周期
  render() {
    // render里面必须要return一个jsx
    console.log("app render");
    const { count } = this.state;
    return (
      <>
        <h3>生命周期</h3>
        <p>{count}</p>
        <Child count={count} />
      </>
    );
  }

  // 挂载结束
  componentDidMount() {
    console.log("app componentDidMount");
    // 数据请求只能在这里做
    // setTimeout(() => {
    //   this.setState({
    //     count: 50,
    //   });
    // }, 3000);
  }
}

export default App;
